<template>
  <div class="basisBox">
    <div class="topTitle">基础设置</div>
    <el-form ref="basisForm" :model="EduxcloudCourse" :rules="basisRules" label-width="200px">
      <el-form-item label="学习模式">
        <el-radio-group v-model="EduxcloudCourse.learnMode">
          <el-radio label="freeMode">自由式</el-radio>
          <el-radio label="lockMode">解锁式</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学习有效期">
        <el-radio-group v-model="EduxcloudCourse.learnExpiryMode">
          <el-radio label="days">随到随学</el-radio>
          <el-radio label="date">固定周期</el-radio>
          <el-radio label="forever">永久有效</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="EduxcloudCourse.learnExpiryMode==='days'" class="studyShowBox">
        <el-radio-group v-model="EduxcloudCourse.deadlineType">
          <el-radio label="end_date">按截止日期</el-radio>
          <el-radio label="days">按有效天数</el-radio>
        </el-radio-group>
        <div v-if="EduxcloudCourse.deadlineType==='end_date'" style="margin-top:20px;">
          <el-date-picker v-model="EduxcloudCourse.endTime" type="datetime" placeholder="选择日期时间"/>
          <span style="color: #616161;">在此日期前，学员可进行学习。</span>
        </div>
        <div v-if="EduxcloudCourse.deadlineType==='days'" style="margin-top:20px;">
          <el-input v-model="EduxcloudCourse.deadlineDays" style="width:100px;"/>
          <span style="color: #616161;">从加入当天起，在几天内可进行学习。</span>
        </div>
      </div>
      <div v-if="EduxcloudCourse.learnExpiryMode==='date'" class="studyShowBox">
        <el-date-picker
          v-model="EduxcloudCourse.fixedCycleTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="studyInfo__tip studyInfo_left">教学计划一旦发布，有效期类型不能修改；课程或教学计划关闭后，可以修改日期，新的学习有效期仅对修改后加入的学员生效。</div>
      <el-form-item label="任务完成规则">
        <el-radio-group v-model="EduxcloudCourse.enableFinish">
          <el-radio label="1">无限制</el-radio>
          <el-radio label="0">由任务完成条件决定</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设置免费学习任务">
        <span style="color: #a1a1a1;">免费任务仅支持图文、视频、音频、Flash、文档、PPT</span>
      </el-form-item>
      <el-form-item label="视频试看">
        <el-select v-model="EduxcloudCourse.tryLookLength" placeholder="请选择">
          <el-option
            v-for="item in trySeeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="承诺提供服务">
        <el-tag>24小时作业批阅</el-tag>
        <el-tag>24小时阅卷点评</el-tag>
        <el-tag>提问必答</el-tag>
        <el-tag>一对一在线答疑</el-tag>
      </el-form-item>
      <el-button type="primary" style="margin:20px 0 20px 200px;" @click="updateCourse">保 存</el-button>
    </el-form>
  </div>
</template>
<script>
  import {getTenantId} from '@/utils/auth';
  import {updateCourse} from '@/api/subject/course';
  import eventBus from '@/eventBus'
  export default {
    data() {
      return {
        EduxcloudCourse: {
          price: 0,
          canJoin: 'yes',
          deadline: 'infinite',
          deadlineDays: 0,
          deadlineType: 'end_date',
          learnExpiryMode: 'days',
          customTime: '',
          studyMode: 'liberty',
          studyValidity: 'anyTime',
          studyWay: 'endWay',
          endTime: '',
          tryLookLength: 0,
          enableFinish: 0,
          fixedCycleTime: '',
          taskRules: 'unlimited',
          trySeeTime: '',
          learnMode: 'freeMode',
          voiceCourse: true

        },
        basisRules: {
          price:
            [{required: true, message: '请输入价格', trigger: 'blur'}]
        },
        trySeeOptions: [
          {
            value: '0',
            label: '不支持试看'
          },
          {
            value: '1',
            label: '1分钟试看'
          },
          {
            value: '5',
            label: '5分钟试看'
          },
          {
            value: '10',
            label: '10分钟试看'
          }
        ]
      }
    },
    created() {
      this.acceptWord();
    },
    methods: {
      updateCourse() {
        this.$refs['basisForm'].validate((valid) => {
          if (valid) {
            console.log('course id:' + this.EduxcloudCourse.id);
            updateCourse(this.EduxcloudCourse).then(response => {
              if (response.code === 200) {
                this.$notify({title: '成功', message: '更新成功', type: 'success', duration: 2000});
              }
            })
          }
        })
      },
      // 接收兄弟传值
      acceptWord() {
        eventBus.$on('acceptEduxcloudCourseId', (data) => {
          console.log('accept id:' + data);
          this.EduxcloudCourse.id = data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .basisBox {
    padding: 10px;

    .topTitle {
      font-size: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }

    .navTitle {
      background-color: #e1e1e1;
      padding: 10px 10px 10px 30px;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .studyShowBox {
      background-color: #f5f5f5;
      padding: 20px;
      width: 500px;
      margin-left: 200px;
    }

    .studyInfo__tip {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1;
      color: #adadad;
    }

    .studyInfo_left {
      margin-left: 200px;
    }
  }
</style>
